<template>
  <canvas ref="canvas" class="neon-canvas"></canvas>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {
  Engine,
  Scene,
  ArcRotateCamera,
  SpotLight,
  MeshBuilder,
  StandardMaterial,
  Color3,
  Vector3,
  HighlightLayer,
  ShadowGenerator
} from '@babylonjs/core';

const canvas = ref(null);

onMounted(() => {
  // 初始化 Babylon.js 引擎
  const engine = new Engine(canvas.value, true, {
    antialias: true,
    multisampling: 4,
    stencil: true
  });
  const scene = new Scene(engine);

  // Setup environment
  var camera = new ArcRotateCamera("Camera", 0, 0, 90, Vector3.Zero(), scene);
  camera.lowerBetaLimit = 0.1;
  camera.upperBetaLimit = (Math.PI / 2) * 0.9;
  camera.lowerRadiusLimit = 1;
  camera.upperRadiusLimit = 150;
  camera.attachControl(canvas, true);

  camera.setPosition(new Vector3(0, 10, -20));
  // 响应式调整
  window.addEventListener("resize", () => engine.resize());
  engine.runRenderLoop(() => {
    scene.render();
  });

  scene.ambientColor = new Color3(0.1, 0.2, 0.3); // 设置冷色调  环境光

  // light1
  var light = new SpotLight("spotLight", new Vector3(-40, 40, -40), new Vector3(1, -1, 1), Math.PI / 5, 10, scene);
  light.position = new Vector3(-40, 40, -40);
  light.diffuse = new Color3(1, 1, 0);
  light.specular = new Color3(0, 0, 0); //高光黑色

  var light2 = new SpotLight("spotLight2", new Vector3(40, 40, -40), new Vector3(-1, -1, 1), Math.PI / 5, 10, scene);
  light2.diffuse = new Color3(0, 1, 1);
  light2.specular = new Color3(0, 0, 0); //高光黑色

  // Shadows
  // 高质量阴影设置
  const shadowGenerator = new ShadowGenerator(2048, light); // 提高阴影分辨率
  shadowGenerator.usePercentageCloserFiltering = true; // 启用PCF软阴影
  shadowGenerator.filteringQuality = ShadowGenerator.QUALITY_HIGH; // 高质量过滤
  shadowGenerator.bias = 0.0001; // 调整阴影偏移

  const shadowGenerator2 = new ShadowGenerator(2048, light2); // 提高阴影分辨率
  shadowGenerator2.usePercentageCloserFiltering = true; // 启用PCF软阴影
  shadowGenerator2.filteringQuality = ShadowGenerator.QUALITY_HIGH; // 高质量过滤
  shadowGenerator2.bias = 0.0001; // 调整阴影偏移

  shadowGenerator.setDarkness(0.3); // 降低阴影透明度
  shadowGenerator2.setDarkness(0.3);

  // Ground
  var ground = MeshBuilder.CreateGround("ground", { width: 200, height: 200, subdivisions: 100 }, scene, false);
  var groundMaterial = new StandardMaterial("ground", scene);
  groundMaterial.specularColor = new Color3(0, 0, 0);
  ground.material = groundMaterial;

  // 创建盒子（左侧）
  const box1 = MeshBuilder.CreateBox("box1", { size: 4 }, scene);
  box1.position.set(-5, 2.5, -10);
  const boxMat1 = new StandardMaterial("boxMat1", scene);
  boxMat1.diffuseColor = new Color3(0.2, 0.4, 0.6); // 冷蓝色
  boxMat1.specularColor = new Color3(0.5, 0.6, 0.7); // 亮冷色高光
  boxMat1.metallic = 1; // 金属质感
  boxMat1.roughness = 0.3; // 光滑表面
  box1.material = boxMat1;

  // 创建磨砂塑料盒子（右侧）
  const box2 = MeshBuilder.CreateBox("box2", { size: 4 }, scene);
  box2.position.set(5, 2.5, -10);
  const boxMat2 = new StandardMaterial("boxMat2", scene);
  boxMat2.diffuseColor = new Color3(0.4, 0.6, 0.8); // 浅冷蓝色
  boxMat2.specularColor = new Color3(0.3, 0.5, 0.7); // 中等冷色高光
  boxMat2.metallic = 0.2; // 非金属材质
  boxMat2.roughness = 1; // 磨砂表面
  box2.material = boxMat2;

  // 创建球体
  const sphere = MeshBuilder.CreateSphere("sphere", { diameter: 4 }, scene);
  sphere.position.set(0, 10, -10);
  const sphereMat2 = new StandardMaterial("sphereMat", scene);
  sphereMat2.diffuseColor = new Color3(0.3, 0.5, 0.7); // 冷青色
  sphereMat2.metallic = 0;
  sphere.material = sphereMat2;

  // 添加高光效果
  const hl = new HighlightLayer("hl", scene);
  hl.addMesh(sphere, Color3.FromHexString("#4af")); // 球体添加蓝色高光
  hl.addMesh(box1, Color3.FromHexString("#6cf")); // 盒子1添加浅蓝高光
  hl.addMesh(box2, Color3.FromHexString("#8df")); // 盒子2添加淡蓝高光

  // 添加阴影投射
  [box1, box2, sphere].forEach(mesh => {
    shadowGenerator.addShadowCaster(mesh);
    shadowGenerator2.addShadowCaster(mesh);
    mesh.receiveShadows = true;
  });

  ground.receiveShadows = true;
})
</script>

<style scoped>
.neon-canvas {
  width: 100%;
  height: 100vh;
  display: block;
  outline: none;
}

body {
  margin: 0;
  overflow: hidden;
  background: #000;
}
</style>